<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="./jquery.js"></script>
  <style>
    table {
      background-color: collapse;
      width:1200px;
      margin: 0 auto;
      color: #63ab8e;
      font-family: monospace;
      font-size: 20px;
      text-align: left;
    }

    th {
      background-color: #03a7a2;
      color: white;
    }

    /* tr nth-child(even) {
      background-color: #f2f2f2
    } */
  </style>
</head>

<body>
  <table cellspacing="0">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Phone</th>
        <th>Hobby</th>
        <th>Describe</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <script>
    var fun = function () {
      $.get("tab.php", function (res) {
        var data = JSON.parse(res);

        var tbody = document.querySelector("tbody");

        // 2. 动态生成 tr (行)
        for (var i = 0; i < data.length; i++) {
          var tr = document.createElement("tr");
          // 每一行放一个对象，每一列，都属对象的属性值。
          // 遍历对象，将属性的值，放入 td
          for (k in data[i]) {
            // console.log(k, data[i][k]);
            // 生成 td 列
            var td = document.createElement("td");
            // 将对象的属性值放入 td
            td.innerHTML = data[i][k];
            // td 放入 tr
            tr.appendChild(td);
          }
          tbody.appendChild(tr);
        }
      });
    };
    fun();
  </script>
</body>

</html>